<template>
  <div>
    <el-form
      :model="basicForm"
      :rules="basicRules"
      ref="basicForm"
      size="small"
    >
     <div class="alter-basic">
      <div class="row-alter alter-width-1x">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更内容</span>
        </div>
        <div class="col-alter">注册名称</div>
        <div class="col-alter">门头名称</div>
        <div class="col-alter">商户简称</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">企业信用代码</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">营业执照有效期</div>
        <div class="col-alter">所在区域</div>
        <div class="col-alter">商户经营地址</div>
        <div class="col-alter">法人姓名</div>
        <div class="col-alter">法人身份证号</div>
        <div class="col-alter">法人身份证有效期</div>
        <div class="col-alter">法人联系方式</div>
        <div class="col-alter">法人地址</div>
        <div class="col-alter">联系人姓名</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">联系人身份证号</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">联系人身份证有效期</div>
        <div class="col-alter">联系方式</div>
        <div class="col-alter">联系人邮箱</div>
        <div class="col-alter">商户行业</div>
     </div>
     <div class="row-alter alter-width-2x">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更前内容</span>
        </div>
        <div class="col-alter">{{ oldBasicForm.registeredName }}</div>
        <div class="col-alter">{{ oldBasicForm.businessLicence }}</div>
        <div class="col-alter">{{ oldBasicForm.userShortName }}</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">{{ oldBasicForm.businessLicenceNo }}</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">{{ oldBasicForm.businessLicenceSDate }} 至 {{ oldBasicForm.businessLicenceEDate }}</div>
        <div class="col-alter">{{ oldBasicForm.mercProv }}/{{ oldBasicForm.mercCity }}/{{ oldBasicForm.mercArea }}</div>
        <div class="col-alter">{{ oldBasicForm.contactsAddr }}</div>
        <div class="col-alter">{{ oldBasicForm.legalPersonName }}</div>
        <div class="col-alter">{{ oldBasicForm.legalPersonId }}</div>
        <div class="col-alter">{{ oldBasicForm.legalPersonIdSdate }} 至 {{ oldBasicForm.legalPersonIdEdate }}</div>
        <div class="col-alter">{{ oldBasicForm.legalPersonPhone }}</div>
        <div class="col-alter">{{ oldBasicForm.crpAddr }}</div>
        <div class="col-alter">{{ oldBasicForm.contactsName }}</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">{{ oldBasicForm.contactPersonId }}</div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">{{ oldBasicForm.idValiddateBegin }}{{ oldBasicForm.idValiddateEnd }}</div>
        <div class="col-alter">{{ oldBasicForm.contactsPhone }}</div>
        <div class="col-alter">{{ oldBasicForm.contactsEmail }}</div>
        <div class="col-alter">{{ oldBasicForm.ysMerchantType }}/{{ oldBasicForm.industryName }}/{{ oldBasicForm.mccCdName }}</div>
     </div>
     <div class="row-alter alter-width-2x">
        <div class="col-alter border-bottom">
          <span class="alter-title">变更后内容</span>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="registeredName">
            <el-input
              type="text"
              v-model="basicForm.registeredName"
              :placeholder="`请输入注册名称`"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="businessLicence">
            <el-input
              type="text"
              v-model="basicForm.businessLicence"
              :placeholder="`请输入门头名称`"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="userShortName">
            <el-input
              type="text"
              v-model="basicForm.userShortName"
              placeholder="请输入商户简称"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">
          <el-form-item label="" label-width="0" prop="businessLicenceNo">
            <el-input
              type="text"
              v-model="basicForm.businessLicenceNo"
              placeholder="请输入企业社会信用代码"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">
            <div class="haruyuki-flex-space-between haruyuki-align-items-center">
              <el-form-item label="" label-width="0" prop="businessLicenceSDate">
                <el-date-picker
                  class="haruyuki-width-100"
                  type="date"
                  v-model="basicForm.businessLicenceSDate"
                  placeholder="请选择营业执照开始日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="businessLicenceSDateChange"
                  ></el-date-picker>
              </el-form-item>
              <el-form-item label="" label-width="0" prop="businessLicenceEDate">
                  <el-date-picker
                  class="haruyuki-width-100"
                  type="date"
                  v-model="basicForm.businessLicenceEDate"
                  placeholder="请输入营业执照截止日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                  <el-checkbox class="haruyuki-ml-6" v-model="businessLicenceEDateChecked" @change="businessLicenceEDateCheckedChange">长期</el-checkbox>
              </el-form-item>
            </div>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="mercProvinceCityArea">
            <el-cascader
              class="haruyuki-width-100"
              v-model="basicForm.mercProvinceCityArea"
              :options="mercProvinceCityAreaOptions"
              :props="mercProvinceCityAreaProps"
              placeholder="请选择所在区域"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="contactsAddr">
            <el-input
              type="input"
              v-model="basicForm.contactsAddr"
              placeholder="请输入经营地址"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="legalPersonName">
            <el-input
              size="small"
              v-model="basicForm.legalPersonName"
              placeholder="请输入法人姓名"
              @change="legalPersonNameChange"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="legalPersonId">
            <el-input
              v-model="basicForm.legalPersonId"
              placeholder="请输入身份证号"
              @change="legalPersonIdChange"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <div class="haruyuki-flex-space-between haruyuki-align-items-center">
            <el-form-item label="" label-width="0" prop="legalPersonIdSdate">
              <el-date-picker
                class="haruyuki-width-100"
                type="date"
                v-model="basicForm.legalPersonIdSdate"
                placeholder="请输入身份证开始日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="legalPersonIdSdateChange"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="" label-width="0" prop="legalPersonIdEdate">
              <el-date-picker
                type="date"
                class="haruyuki-width-100"
                v-model="basicForm.legalPersonIdEdate"
                placeholder="请输入身份证截止日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="legalPersonIdEdateChange"
              ></el-date-picker>
              <el-checkbox class="haruyuki-ml-6" v-model="legalPersonIdEdateChecked" @change="legalPersonIdEdateCheckedChange">长期</el-checkbox>
            </el-form-item>
          </div>
        </div>
        <div class="col-alter">
           <el-form-item label="" label-width="0" prop="legalPersonPhone">
            <el-input
              size="small"
              v-model="basicForm.legalPersonPhone"
              placeholder="请输入法人联系方式"
              @change="legalPersonPhoneChange"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" prop="crpAddr">
            <el-input
              type="input"
              v-model="basicForm.crpAddr"
              placeholder="请输入法人地址"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="contactsName">
            <el-input
              type="text"
              v-model="basicForm.contactsName"
              placeholder="请输入联系人姓名"
              :disabled="isLegalban"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">
          <el-form-item label="" label-width="0" prop="contactPersonId">
            <el-input
              v-model="basicForm.contactPersonId"
              placeholder="请输入联系人身份证号"
              :disabled="isLegalban"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter" v-if="basicForm.userType == '0' || basicForm.userType == '1'">
          <div class="haruyuki-flex-space-between haruyuki-align-items-center">
            <el-form-item label="" label-width="0" prop="idValiddateBegin">
              <el-date-picker
                class="haruyuki-width-100"
                type="date"
                v-model="basicForm.idValiddateBegin"
                placeholder="请输入身份证开始日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="isLegalban"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="" label-width="0" prop="idValiddateEnd">
              <el-date-picker
                class="haruyuki-width-100"
                type="date"
                v-model="basicForm.idValiddateEnd"
                placeholder="请输入身份证截止日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="isLegalban"
              ></el-date-picker>
              <el-checkbox class="haruyuki-ml-6" v-model="idValiddateEndChecked" @change="idValiddateEndCheckedChange">长期</el-checkbox>
            </el-form-item>
          </div>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="contactsPhone">
            <el-input
              type="tel"
              v-model="basicForm.contactsPhone"
              placeholder="请输入联系方式"
              :disabled="isLegalban"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <el-form-item label="" label-width="0" prop="contactsEmail">
            <el-input
              type="email"
              v-model="basicForm.contactsEmail"
              placeholder="请输入联系人邮箱"
            ></el-input>
          </el-form-item>
        </div>
        <div class="col-alter">
          <div class="haruyuki-flex-space-between haruyuki-align-items-center">
            <el-form-item label="" label-width="0" prop="ysMerchantKey">
              <el-select
                size="small"
                class="haruyuki-width-100"
                @change="merchantKeyChange"
                v-model="basicForm.ysMerchantKey"
                placeholder="请选择行业大类"
                filterable
              >
                <el-option
                  v-for="item in ysMerchantKeyOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" label-width="0" prop="industryCode">
              <el-select
                size="small"
                class="haruyuki-width-100"
                @change="industryChange"
                v-model="basicForm.industryCode"
                placeholder="请选择行业类型"
                filterable
              >
                <el-option
                  v-for="item in industryCodeOptions"
                  :key="item.industryCode"
                  :label="item.industryName"
                  :value="item.industryCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" label-width="0" prop="mccCd">
              <el-select
                size="small"
                class="haruyuki-width-100"
                v-model="basicForm.mccCd"
                placeholder="请选择行业类别"
                filterable
              >
                <el-option
                  v-for="item in mccCdOptions"
                  :key="item.industryCode"
                  :label="item.industryName"
                  :value="item.industryCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
     </div>
     <div class="haruyuki-p-10 haruyuki-mt-20">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="法人身份证人像面:" label-width="120px" prop="cardFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardFrontRequest"
              :limit="1"
              :file-list="cardFrontList"
              :on-remove="cardFrontRemove"
              :before-remove="beforecardFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证国徽面:" label-width="120px" prop="cardReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardReverseRequest"
              :limit="1"
              :file-list="cardReverseList"
              :on-remove="cardReverseRemove"
              :before-remove="beforecardReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType == '3'">
          <el-form-item label="法人手持身份证:" label-width="120px" prop="handHeld">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httphandHeldRequest"
              :limit="1"
              :file-list="handHeldList"
              :on-remove="handHeldRemove"
              :before-remove="beforehandHeldRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.userType != '3'">
          <el-form-item label="营业执照原件照片:" label-width="120px" prop="licensePic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpRoaLicenseRequest"
              :limit="1"
              :file-list="roaLicenseFileList"
              :on-remove="roaLicenseRemove"
              :before-remove="beforeroaLicenseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.isLegal == '0'">
          <el-form-item label="联系人身份证人像面:" label-width="120px" prop="contactFrontPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpContactFrontPicRequest"
              :limit="1"
              :file-list="contactFrontPicList"
              :on-remove="contactFrontPicRemove"
              :before-remove="beforecontactFrontPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.isLegal == '0'">
          <el-form-item label="联系人身份证国徽面:" label-width="120px" prop="contactReversePic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpContactReversePicRequest"
              :limit="1"
              :file-list="contactReversePicList"
              :on-remove="contactReversePicRemove"
              :before-remove="beforecontactReversePicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.isLegal == '0'">
          <el-form-item label="业务办理授权函:" label-width="120px" prop="authLetterPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAuthLetterPicRequest"
              :limit="1"
              :file-list="authLetterPicList"
              :on-remove="authLetterPicRemove"
              :before-remove="beforeauthLetterPicRemove"
              :on-exceed="authLetterPicExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注:" label-width="50px" prop="remark">
            <el-input
              type="textarea"
              v-model="basicForm.remark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
     </div>
    </el-form>
    <el-image-viewer
      style="z-index: 99999;"
      v-if="imgShow"
      :on-close="()=>{ imgShow = false }"
      :url-list="imgUrlList"
    ></el-image-viewer>
  </div>
</template>

<script>
import { getMccIndustryList, getMccList } from "@/api/rb-oem/posinfo/pos_info";
import { getDictionary, getRegion } from "@/api/system/dict";
import { uploadPrivate, uploadMerchantOCRCard } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';
export default {
    mixins: [canvasImg],
    props: {
        basicForm: {
          type: Object,
          default: () => {
            return {}
          }
        },
        oldBasicForm: {
          type: Object,
          default: () => {
            return {}
          }
        },
        isImgShow: { //是否显示 客服会话框 默认显示
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
          imgShow:false,
          imgUrlList:[],
          basicRules: {
            userType: [
              { required: true, message: "请选择商户类型", trigger: "blur" },
            ],
            ysMerchantKey: [
              { required: true, message: "请选择行业大类", trigger: "blur" },
            ],
            industryCode: [
              { required: true, message: "请选择行业类型", trigger: "blur" },
            ],
            mccCd: [
              { required: true, message: "请选择行业MCC码", trigger: "blur" },
            ],
            // mccList: [
            //   { required: true, message: "请选择行业MCC码", trigger: "blur" },
            // ],
            userShortName: [
              { required: true, message: "请输入商户简称", trigger: "blur" },
            ],
            handHeld: [
              { required: true, message: "请上传法人手持身份证", trigger: "blur" },
            ],
            cardFront: [
              {
                required: true,
                message: "请上传法人身份证人像面",
                trigger: "blur",
              },
            ],
            cardReverse: [
              {
                required: true,
                message: "请上传法人身份证国徽面",
                trigger: "blur",
              },
            ],
            legalPersonName: [
              { required: true, message: "请输入法人姓名", trigger: "blur" },
            ],
            crpGender: [
              { required: true, message: "请输入法人性别", trigger: "blur" },
            ],
            legalPersonPhone: [
              { required: true, message: "请输入法人联系方式", trigger: "blur" },
            ],
            crpProfession: [
              { required: true, message: "请输入法人职业", trigger: "blur" },
            ],
            legalPersonId: [
              { required: true, message: "请输入身份证号", trigger: "blur" },
            ],
            legalPersonIdSdate: [
              {
                required: true,
                message: "请选择法人身份证开始日期",
                trigger: "blur",
              },
            ],
            legalPersonIdEdate: [
              {
                required: true,
                message: "请选择法人身份证截止日期",
                trigger: "blur",
              },
            ],
            legalProvinceCityArea: [
              { required: true, message: "请选择法人省市区", trigger: "blur" },
            ],
            crpAddr: [
              { required: true, message: "请输入法人地址", trigger: "blur" },
            ],
            licensePic: [
              { required: true, message: "请上传营业执照原件照片", trigger: "blur" },
            ],
            registeredName: [
              { required: true, message: `请输入注册名称`, trigger: "blur" },
            ],
            businessLicence: [
              { required: true, message: `请输入门头名称`, trigger: "blur" },
            ],
            mercProvinceCityArea: [
              { required: true, message: "请选择法人省市区", trigger: "blur" },
            ],
            contactsAddr: [
              { required: true, message: "请输入经营地址", trigger: "blur" },
            ],
            businessLicenceNo: [
              { required: true, message: "请输入企业社会信用代码", trigger: "blur" },
            ],
            businessLicenceSDate: [
              {
                required: true,
                message: "请选择营业执照开始日期",
                trigger: "blur",
              },
            ],
            businessLicenceEDate: [
              {
                required: true,
                message: "请选择营业执照截止日期",
                trigger: "blur",
              },
            ],
            isLegal: [
              { required: true, message: "请选择联系人类型", trigger: "blur" },
            ],
            authLetterPic: [
              { required: true, message: "请输入业务办理授权函", trigger: "blur" },
            ],
            contactFrontPic: [
              { required: true, message: "请输入联系人身份证人像面", trigger: "blur" },
            ],
            contactReversePic: [
              { required: true, message: "请输入联系人身份证国徽面", trigger: "blur" },
            ],
            contactsName: [
              { required: true, message: "请输入联系人姓名", trigger: "blur" },
            ],
            contactsPhone: [
              { required: true, message: "请输入联系方式", trigger: "blur" },
            ],
            contactsEmail: [
              { required: true, message: "请输入联系人邮箱", trigger: "blur" },
            ],
            contactPersonId: [
              { required: true, message: "请输入联系人身份证号", trigger: "blur" },
            ],
            idValiddateBegin: [
              { required: true, message: "请选择联系人身份证开始日期", trigger: "blur" },
            ],
            idValiddateEnd: [
              { required: true, message: "请选择联系人身份证截止日期", trigger: "blur" },
            ],
            serNo: [
              { required: true, message: "请选择服务商", trigger: "blur" },
            ],
            // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
          },
          legalPersonIdEdateChecked: false,
          businessLicenceEDateChecked: false,
          idValiddateEndChecked: false,
          mercProvinceCityAreaOptions: [],
          mercProvinceCityAreaProps: {
            label: "name",
            value: "code",
            lazy: true,
            lazyLoad(node, resolve) {
              let stop_level = 2;
              let level = node.level;
              let data = node.data || {};
              let code = data.code;
              let list = [];
              let callback = () => {
                resolve(
                  (list || []).map((ele) => {
                    return Object.assign(ele, {
                      leaf: level >= stop_level,
                    });
                  })
                );
              };
              if (level == 0) {
                getRegion(code).then(
                  (res) => {
                    list = res.data.data;
                    callback();
                  },
                  (error) => {
                    window.console.log(error);
                  }
                );
              } else if (level == 1) {
                getRegion(code).then(
                  (res) => {
                    list = res.data.data;
                    callback();
                  },
                  (error) => {
                    window.console.log(error);
                  }
                );
              } else if (level == 2) {
                getRegion(code).then(
                  (res) => {
                    list = res.data.data;
                    callback();
                  },
                  (error) => {
                    window.console.log(error);
                  }
                );
              } else {
                callback();
              }
            },
          },
          ysMerchantKeyOptions: [],
          industryCodeOptions: [],
          mccCdOptions: [],
          roaLicenseFileList: [],
          handHeldList: [],
          cardFrontList: [],
          cardReverseList: [],
          authLetterPicList: [],
          contactFrontPicList: [],
          contactReversePicList: [],
        }
    },
    computed: {
      merchantMccType() {
        const { userType, ysMerchantKey } = this.basicForm;
        return {
          userType,
          ysMerchantKey
        }
      }
    },
    watch: {
      merchantMccType(data) {
        if (data) {
          console.log(data, 'ddsdsdsd');
          if (data.userType && data.ysMerchantKey) {
            this.getMccIndustry(data.userType, data.ysMerchantKey)
          }
        }
      },
      "basicForm.industryCode"(val) {
        if (val) {
          this.getMccChildren(val)
        }
      },
      "basicForm.legalPersonIdEdate"(date) { //法人信息 法人身份证截止日期
        if (date == '2999-12-31 00:00:00') {
          this.legalPersonIdEdateChecked = true;
        }
      },
      "basicForm.businessLicenceEDate"(date) { //企业信息 营业执照截止日期
        if (date == '2999-12-31 00:00:00') {
          this.businessLicenceEDateChecked = true;
        }
      },
      "basicForm.idValiddateEnd"(date) { //联系人 身份证截止日期
        if (date == '2999-12-31 00:00:00') {
          this.idValiddateEndChecked = true;
        }
      },
    },
    created() {
      if (this.basicForm.legalPersonIdEdate == '2999-12-31 00:00:00') { //法人信息 法人身份证截止日期
        this.legalPersonIdEdateChecked = true;
      }
      if (this.basicForm.businessLicenceEDate == '2999-12-31 00:00:00') { //企业信息 营业执照截止日期
        this.businessLicenceEDateChecked = true;
      }
      if (this.basicForm.idValiddateEnd == '2999-12-31 00:00:00') { //联系人 身份证截止日期
        this.idValiddateEndChecked = true;
      }
      this.getMccMerchantKey();
      this.getMccIndustry(this.basicForm.userType, this.basicForm.ysMerchantKey)
      this.getMccChildren(this.basicForm.industryCode)
    },
    methods: {
      /* 字典 */
      doGetDicts() {
        // getDictionary({code: "crp_gender"}).then((res) => {
        //   this.crpGenderOptions = res.data.data;
        // });
        // getDictionary({code: "crp_profession"}).then((res) => {
        //   this.crpProfessionOptions = res.data.data;
        // });
        this.getMccMerchantKey();
      },
      /* 行业大类 interface */
      getMccMerchantKey() {
        getDictionary({code: "ys_merchant_type"}).then((res) => {
          this.ysMerchantKeyOptions = res.data.data;
        });
      },
      /* 行业类型 interface */
      getMccIndustry(userType, ysMerchantKey) {
        getMccIndustryList(userType, ysMerchantKey).then(
          (res) => {
            this.industryCodeOptions = res.data.data;
          },
          (error) => {
            window.console.log(error);
          }
        );
      },
      /* 行业类别 interface */
      getMccChildren(industryCode) {
        getMccList("-1", "-1", industryCode).then(
          (res) => {
            this.mccCdOptions = res.data.data;
          },
          (error) => {
            window.console.log(error);
          }
        );
      },
      /* 商户类型 change */
      merchantTypeChange(e) {
        if (e) {
          this.basicForm.industryCode = '';
          this.basicForm.mccCd = '';
        }
      },
      /* 行业大类 change */
      merchantKeyChange(e) {
        if (e) {
          this.basicForm.industryCode = '';
          this.basicForm.mccCd = '';
        }
      },
      /* 行业类型 change */
      industryChange(e) {
        if (e) {
          this.basicForm.mccCd = '';
        }
      },
      /* 联系人类型 change */
      isLegalChange(e) {
        if (e == '0') {
          if (JSON.stringify(this.basicForm.contactsData) !== "{}") {
            this.basicForm.contactsName = this.contactsData.contactsName;
            this.basicForm.contactsPhone = this.contactsData.contactsPhone;
            this.basicForm.contactPersonId = this.contactsData.contactPersonId;
            this.basicForm.idValiddateBegin = this.contactsData.idValiddateBegin;
            this.basicForm.idValiddateEnd = this.contactsData.idValiddateEnd;
          }
        }
      },
      /* 文件超出个数限制时的钩子 */
      handHeldExceed() {
        this.$message.error("只能上传一张图片哦~");
      },
      /* 营业执照照片上传 */
      httpRoaLicenseRequest(option) {
        uploadMerchantOCRCard(option.file, "5").then((res) => {
          this.basicForm.licensePic = res.data.data.link;
          this.basicForm.registeredName = res.data.data.companyName; //注册名称
          this.basicForm.businessLicence = res.data.data.companyName; //门头名称
          this.basicForm.userShortName = res.data.data.companyName; //商户简称
          this.basicForm.businessLicenceNo = res.data.data.creditCode;
          this.basicForm.contactsAddr = res.data.data.businessAddress;
          this.basicForm.businessLicenceSDate = res.data.data.validFromDate;
          this.basicForm.businessLicenceEDate = res.data.data.validToDate;
          this.$refs.basicForm.validateField("licensePic");
        });
      },
      /* 营业执照照片删除 */
      roaLicenseRemove(file, fileList) {
        this.roaLicenseFileList = fileList;
        this.basicForm.licensePic = "";
      },
      beforeroaLicenseRemove() {
        return this.$confirm(`确定移除营业执照照片？`);
      },
      /* 法人手持身份证上传 */
      httphandHeldRequest(option) {
        uploadPrivate(option.file, option.file.name).then((res) => {
          this.basicForm.handHeld = res.data.data.name;
          this.$refs.basicForm.validateField("handHeld");
        });
      },
      /* 法人手持身份证删除 */
      handHeldRemove(file, fileList) {
        this.handHeldList = fileList;
        this.basicForm.handHeld = "";
      },
      beforehandHeldRemove() {
        return this.$confirm(`确定移除法人手持身份证？`);
      },
      /* 法人身份证人像面上传 */
      httpCardFrontRequest(option) {
        uploadMerchantOCRCard(option.file, "1").then((res) => {
          let data = res.data.data;
          this.basicForm.cardFront = data.link;
          this.basicForm.legalPersonName = data.name;
          this.basicForm.registeredName = data.name;
          this.basicForm.legalPersonId = data.num;
          this.basicForm.crpGender = data.sex;
          this.basicForm.crpAddr = data.address;
          if (this.basicForm.isLegal == '1') {
            this.basicForm.contactsName = this.basicForm.legalPersonName; //联系人名称
            this.basicForm.contactPersonId = this.basicForm.legalPersonId;
          }
          this.$refs.basicForm.validateField("cardFront");
        });
      },
      /* 法人身份证人像面删除 */
      cardFrontRemove(file, fileList) {
        this.cardFrontList = fileList;
        this.basicForm.cardFront = "";
      },
      beforecardFrontRemove() {
        return this.$confirm(`确定移除法人身份证人像面照片？`);
      },
      /* 法人身份证国徽面上传 */
      httpCardReverseRequest(option) {
        uploadMerchantOCRCard(option.file, "2").then((res) => {
          this.basicForm.cardReverse = res.data.data.link;
          this.basicForm.legalPersonIdSdate = res.data.data.startDate;
          this.basicForm.legalPersonIdEdate = res.data.data.endDate;
          if (this.basicForm.isLegal == '1') {
            this.basicForm.idValiddateBegin = this.basicForm.legalPersonIdSdate;
            this.basicForm.idValiddateEnd = this.basicForm.legalPersonIdEdate;
          }
          this.$refs.basicForm.validateField("cardReverse");
        });
      },
      /* 法人身份证国徽面删除 */
      cardReverseRemove(file, fileList) {
        this.cardReverseList = fileList;
        this.basicForm.cardReverse = "";
      },
      beforecardReverseRemove() {
        return this.$confirm(`确定移除法人身份证国徽面照片？`);
      },
      /* 业务办理授权函上传 */
      httpAuthLetterPicRequest(option) {
        uploadPrivate(option.file, option.file.name).then((res) => {
          this.basicForm.authLetterPic = res.data.data.name;
          this.$refs.basicForm.validateField("authLetterPic");
        });
      },
      /* 业务办理授权函删除 */
      authLetterPicRemove(file, fileList) {
        this.authLetterPicList = fileList;
        this.basicForm.authLetterPic = "";
      },
      beforeauthLetterPicRemove() {
        return this.$confirm(`确定移除业务办理授权函照片？`);
      },
      /* 联系人身份证人像面上传 */
      httpContactFrontPicRequest(option) {
        uploadMerchantOCRCard(option.file, "1").then((res) => {
          let data = res.data.data;
          this.basicForm.contactFrontPic = data.link;
          this.basicForm.contactsName = data.name; //联系人名称
          this.basicForm.contactPersonId = data.num;
          this.$refs.basicForm.validateField("contactFrontPic");
        });
      },
      /* 联系人身份证人像面删除 */
      contactFrontPicRemove(file, fileList) {
        this.contactFrontPicList = fileList;
        this.basicForm.contactFrontPic = "";
      },
      beforecontactFrontPicRemove() {
        return this.$confirm(`确定移除联系人身份证人像面照片？`);
      },
      /* 联系人身份证国徽面上传 */
      httpContactReversePicRequest(option) {
        uploadMerchantOCRCard(option.file, "2").then((res) => {
          this.basicForm.contactReversePic = res.data.data.link;
          this.basicForm.idValiddateBegin = res.data.data.startDate;
          this.basicForm.idValiddateEnd = res.data.data.endDate;
          this.$refs.basicForm.validateField("contactReversePic");
        });
      },
      /* 联系人身份证国徽面删除 */
      contactReversePicRemove(file, fileList) {
        this.contactReversePicList = fileList;
        this.basicForm.contactReversePic = "";
      },
      beforecontactReversePicRemove() {
        return this.$confirm(`确定移除联系人身份证国徽面照片？`);
      },
      /* 法人赋值于联系人 */
      legalPersonNameChange(e) {
        if (this.basicForm.isLegal == '1') {
          this.basicForm.contactsName = e;
          this.$refs.basicForm.validateField("contactsName");
        }
      },
      /* 法人手机号赋值于联系人手机号 */
      legalPersonPhoneChange(e) {
        if (this.basicForm.isLegal == '1') {
          this.basicForm.contactsPhone = e;
          this.$refs.basicForm.validateField("contactsPhone");
        }
      },
      /* 法人身份证号赋值于联系人身份证号 */
      legalPersonIdChange(e) {
        if (this.basicForm.isLegal == '1') {
          this.basicForm.contactPersonId = e;
          this.$refs.basicForm.validateField("contactPersonId");
        }
      },
      /* 法人身份证开始日期赋值于联系人身份证开始日期 */
      legalPersonIdSdateChange(e) {
        if (this.basicForm.isLegal == '1') {
          this.basicForm.idValiddateBegin = e;
          this.$refs.basicForm.validateField("idValiddateBegin");
        }
      },
      /* 法人身份证截止日期赋值于联系人身份证截止日期 */
      legalPersonIdEdateChange(e) {
        if (this.basicForm.isLegal == '1') {
          this.basicForm.idValiddateEnd = e;
          this.$refs.basicForm.validateField("idValiddateEnd");
        }
      },
      /* 法人身份证截止日期 长期选择 */
      legalPersonIdEdateCheckedChange(e) {
        if (e) {
          this.basicForm.legalPersonIdEdate = '2999-12-31 00:00:00';
          this.$refs.basicForm.validateField("legalPersonIdEdate");
        } else {
          this.basicForm.legalPersonIdEdate = '';
        }
      },
      /* 营业执照截止日期 长期选择 */
      businessLicenceEDateCheckedChange(e) {
        if (e) {
          this.basicForm.businessLicenceEDate = '2999-12-31 00:00:00';
          this.$refs.basicForm.validateField("businessLicenceEDate");
        } else {
          this.basicForm.businessLicenceEDate = '';
        }
      },
      /* 联系人身份证截止日期 长期选择 */
      idValiddateEndCheckedChange(e) {
        if (e) {
          this.basicForm.idValiddateEnd = '2999-12-31 00:00:00';
          this.$refs.basicForm.validateField("idValiddateEnd");
        } else {
          this.basicForm.idValiddateEnd = '';
        }
      },
      /* 预览图片 */
      imgPreview(file) {
        this.imgUrlList[0] = file.url;
        this.imgShow = true;
      }
    },
}
</script>

<style lang="scss" scoped>
// /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
//   width: 100%;
// }

.alter-basic {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #EBEEF5;

  .alter-title {
    font-weight: bold;
    color: rgba(0, 0, 0, .85);
  }
}

.row-alter {
  display: flex;
  flex-direction: column;
  &.alter-width-2x {
    width: calc(80% / 2);
  }
  &.alter-width-1x {
    width: 19.80%;
  }
  // &::after, &::before {
  //   display: table;
  // }
  &:nth-child(1) {
    color: #485563;
    font-weight: bold;
  }
  &:nth-child(n+2) {
    border-left: 1px solid #EBEEF5;
  }
}

.col-alter {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 46px;
  height: 46px;
  margin-bottom: 6px;
  font-size: 14px;
  &.border-bottom {
    border-bottom: 1px solid #EBEEF5;
    word-break: break-word;
    background-color: #fafafa;
  }
}
</style>